.show{
    opacity:1;
    transition: all 1s ease-in;
}
.hide{
    opacity:0;
    transition: all 1s ease-in;
}
.show2{animation: showItem 2s ease-in forwards;}
.hide2{animation: hideItem 2s ease-in forwards;}
@keyframes showItem{
    0%{
        opacity:0;
        color:red;
    }
    50%{
        opacity:.5;
        color:green;
    }
    100%{
        opacity: 1;
        color:blue;
    }
}
@keyframes hideItem{
    0%{
        opacity:1;
        color:red;
    }
    50%{
        opacity:.5;
        color:green;
    }
    100%{
        opacity: 0;
        color:blue;
    }
}


.fade-enter,.fade-appear{
    opacity:0;
}
.fade-enter-active,.fade-appear-active{
    opacity:1;
    transition:opacity 1s ease-in;
}
.fade-enter-done{
    opacity:1;
}

.fade-exit{
    opacity:1;
}
.fade-exit-active{
    opacity:0;
    transition:opacity 1s ease-in;
}
.fade-exit-done{
    opacity:0;
}